<template>
  <div class="wrap" v-if="lists.length || msg">
    <div class="title">通知</div>
    <marquee-text :repeat="10" :duration="60" v-if="msg">
      <div id="box">
        <div class="txt" id="marquee">{{ msg }}</div>
      </div>
    </marquee-text>
    <marquee-text :repeat="10" :duration="60" v-else>
      <div id="box">
        <div class="txt" id="marquee">{{ text }}</div>
      </div>
    </marquee-text>
    <!-- <div id="box">
      <div class="txt" id="marquee">{{text}}</div>
      <div class="txt" id="copy"></div>
    </div>
    <div id="node">{{text}}</div> -->
  </div>
</template>
<script>
import Api from '@/api/index'
import MarqueeText from 'vue-marquee-text-component'
export default {
  name: 'Marquee',
  components: {
    MarqueeText
  },
  data () {
    return {
      text: '',
      lists: [],
      msg: ''
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      let that = this
      Api.getOrderNotify().then(res => {
        if (res.code === 20000 && res.data) {
          that.lists = res.data.array
          that.text = ''
          that.lists.map((item, idx) => {
            that.text += `${item.city}${item.personName}已购买${item.goodsName}！`
          })
          that.msg = ''
        } else if (res.code === 20000) {
          that.msg = res.message
          that.lists = []
        }
      })
    }
    // move () {
    //   let width = document.getElementById('node').getBoundingClientRect().width
    //   let box = document.getElementById('box')
    //   let copy = document.getElementById('copy')
    //   copy.innerText = this.text // 文字副本填充
    //   let distance = 0 // 位移距离
    //   // 设置位移
    //   setInterval(function () {
    //     distance = distance - 1
    //     // 如果位移超过文字宽度，则回到起点
    //     if (-distance >= width) {
    //       distance = 16
    //     }
    //     box.style.transform = 'translateX(' + distance + 'px)'
    //   }, 20)
    // }
  }
  // 更新的时候运动
  // updated: function () {
  //   if (this.lists.length) {
  //     this.move()
  //   }
  // }
}
</script>

<style scoped lang="scss">
.wrap {
  overflow: hidden;
  position: relative;
  .title{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    color: #f36a6f;;
    line-height: .8rem /* 30/37.5 */;
    background-color: #fff;
    z-index: 9;
    padding: 0 .32rem 0 .16rem /* 6/37.5 */;
    &:after{
      content: '';
      position: absolute;
      right: .16rem;
      background-color: #999;
      width: 1px;
      height: .533333rem /* 20/37.5 */;
      top: .12rem /* 9/37.5 */;
    }
  }
  #box {
    width: 80000%;
    height: .8rem /* 30/37.5 */;
    font-size: 14px;
    color: #333;
    line-height: .8rem /* 30/37.5 */;
    position: relative;
    .txt {
      float: left;
    }
  }
  #marquee {
    margin: 0 1.333333rem /* 50/37.5 */ 0 0;
  }
  #node {
    position: absolute;
    z-index: -999;
    top: -999999px;
  }
}
</style>
